<template>
    <!--列表-->
    <div class="notice">
        <div class="container mt-40">
            <div class="left">
                <el-carousel arrow="never" height="340px">
                    <el-carousel-item v-for="item in 2" :key="item">
                        <img src="http://iph.href.lu/600x340?fg=666666&bg=cccccc">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="right">
                <div class="containerR">
                    <div class="title">
                        <span>通知公告</span>
                        <a href="">更多>></a>
                    </div>
                    <div class="noticeList">
                        <div v-for="o in 7" :key="o" class="text item flex align-items-center justify-content-between pointer" @click="navigatorTo(o)">
                            <div class="ellipsis">{{ `&middot;&nbsp;`+  'List item List item List item List item List item List item List item List item List item List item List item List item List item List item List item ' + o }}</div>
                            <div class="flex-0 tar ml-20">2023-07-31</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
// 模拟请求
import { api } from '@/api'

const [res, err] = await api.getUserInfo()
console.log(res)
const navigatorTo = (id) => {
    console.log(`执行跳转方法${id}`);
};
</script>

<style scoped lang="less">
@import "@/assets/style/common.less";
.notice{
    .container {
        height:340px ;
        > div{
            width: 50%;
            float: left;
            height: 340px;
        }
        .left{
            .el-carousel{
                height: 100%;
            }
            .el-carousel__item:nth-child(2n) {
              background-color: #99a9bf;
            }

            .el-carousel__item:nth-child(2n + 1) {
                background-color: #d3dce6;
            }
        }
        .right{
            background: #FFFFFF;
            .containerR {
                padding: 0 24px;
                .title{
                    padding: 16px 0;
                    border-bottom: 2px solid #EEEEEE;
                    span{
                        font-size: 24px;
                        font-weight: 600;
                        color: #222222;
                        line-height: 40px;
                    }
                    a{
                        float: right;
                        font-size: 16px;
                        font-weight: 400;
                        color: #999999;
                        line-height: 40px;
                    }
                }
                .noticeList{
                    padding: 10px 0;
                    .text {
                        font-size: 16px;
                        font-weight: 400;
                        color: #222222;
                        line-height: 30px;
                    }
                }
            }
        }
    }
}
</style>
